<!-- ------------------------------------------------------------------------- -->
<!-- ------------------------------------------------------------------------- -->
<!-- ---------------------- 流调管理--密接人员管理 ---------------------------- -->
<!-- ------------------------------------------------------------------------- -->
<!-- ------------------------------编辑的tag---------------------------------- -->
<!-- -------------------------编辑的tag--关联次密接人员信息---------------------- -->

<template>
  <div class="box">
    <div class="form-box">
      <el-form :inline="true" :model="formInline" class="demo-form-inline">
        <el-row>
          <el-col :span="8"
            ><div class="grid-content ep-bg-purple" />
            <el-form-item size="large">
              <div class="form-text">姓名:</div>
              <el-input
                v-model="formInline.user"
                placeholder="请输入"
                style="width: 350px"
              />
            </el-form-item>
          </el-col>
          <el-col :span="8"
            ><div class="grid-content ep-bg-purple-light" />
            <el-form-item size="large">
              <div class="form-text">性别:</div>
              <el-select
                v-model="formInline.region"
                placeholder="请选择"
                style="width: 350px"
              >
                <el-option label="Zone one" value="shanghai" />
                <el-option label="Zone two" value="beijing" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8"
            ><div class="grid-content ep-bg-purple" />
            <el-form-item size="large">
              <div class="form-text">身份证号:</div>
              <el-input
                v-model="formInline.user"
                placeholder="请输入"
                style="width: 350px"
              />
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="24"
            ><div class="grid-content ep-bg-purple-dark" />
            <el-form-item size="large">
              <div class="form-text">联系电话:</div>
              <el-input
                v-model="formInline.user"
                placeholder="请输入"
                style="width: 350px"
              />
            </el-form-item>
          </el-col>
        </el-row>

        <el-form-item size="large">
          <el-button type="primary" @click="onSubmit">查询</el-button>
          <el-button @click="onSubmit">重置</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="btn-box">
      <el-button type="primary" style="width: 100px" @click="addForm = true"
        >新增</el-button
      >
    </div>
    <!-- 新增模态框 -->
    <el-dialog v-model="addForm" title="编辑次密接触者">
      <el-form :model="form" style="padding-top: 30px; width: 100%">
        <el-form-item label="姓名:" :label-width="formLabelWidth" size="large">
          <el-input
            v-model="form.name"
            autocomplete="off"
            style="width: 90%"
            placeholder="请输入"
          />
        </el-form-item>
        <el-form-item label="性别:" prop="sex" :label-width="formLabelWidth" size="large">
          <el-radio-group v-model="form.sex">
            <el-radio label="男" value="男" />
            <el-radio label="女" value="女" />
          </el-radio-group>
        </el-form-item>
        <el-form-item
          label="身份证号/护照号:"
          :label-width="formLabelWidth"
          size="large"
        >
          <el-input
            v-model="form.name"
            autocomplete="off"
            style="width: 90%"
            placeholder="请输入"
          />
        </el-form-item>
        <el-form-item label="年龄:" :label-width="formLabelWidth" size="large">
          <el-input
            v-model="form.name"
            autocomplete="off"
            style="width: 90%"
            placeholder="请输入"
          />
        </el-form-item>
        <el-form-item label="职业:" :label-width="formLabelWidth" size="large">
          <el-input
            v-model="form.name"
            autocomplete="off"
            style="width: 90%"
            placeholder="请输入"
          />
        </el-form-item>
        <el-form-item
          label="联系电话:"
          :label-width="formLabelWidth"
          size="large"
        >
          <el-input
            v-model="form.name"
            autocomplete="off"
            style="width: 90%"
            placeholder="请输入"
          />
        </el-form-item>
        <el-form-item
          label="现住住址(含街道):"
          :label-width="formLabelWidth"
          size="large"
        >
          <el-input
            v-model="form.name"
            autocomplete="off"
            style="width: 90%"
            placeholder="请输入"
          />
        </el-form-item>

        <!-- img -->

        <el-form-item
          label="疫苗接种记录:"
          prop="patientVaccinationList"
          :label-width="formLabelWidth" size="large"
        >
          <el-table
            :data="form.patientVaccinationList"
            style="width: 90%"
            border="true"
          >
            <el-table-column
              prop="inoculationNum"
              label="接种次数"
              width="180"
              align="center"
            />
            <el-table-column
              prop="vaccineBrand"
              label="疫苗品牌"
              width="180"
              align="center"
            />
            <el-table-column
              prop="inoculationTime"
              label="接种时间"
              align="center"
            />
          </el-table>
        </el-form-item>

        <el-form-item label="接触方式:" prop="contactMode" :label-width="formLabelWidth" size="large">
          <el-select
            v-model="form.name"
            placeholder="请选择"
            style="width: 90%"

          >
            <!-- <el-option label="Zone one" value="shanghai" />
              <el-option label="Zone two" value="beijing" /> -->
          </el-select>
        </el-form-item>

        <el-form-item label="末次接触时间:" prop="lastContactTime" :label-width="formLabelWidth" size="large">
          <el-date-picker
            v-model="form.name"
            type="date"
            placeholder="请选择"
            :default-value="new Date()"
            style="width: 90%"
            :disabled-date="disabledDate"
          />
        </el-form-item>

        <el-form-item label="暴露类型:" prop="contactMode" :label-width="formLabelWidth" size="large">
          <el-select
            v-model="form.name"
            placeholder="请选择"
            style="width: 90%"
          >
            <!-- <el-option label="Zone one" value="shanghai" />
              <el-option label="Zone two" value="beijing" /> -->
          </el-select>
        </el-form-item>

        <el-form-item label="管控时间:" prop="lastContactTime" :label-width="formLabelWidth" size="large">
          <el-date-picker
            v-model="form.name"
            type="date"
            placeholder="请选择"
            :default-value="new Date()"
            style="width: 90%"
            :disabled-date="disabledDate"
          />
        </el-form-item>

        <el-form-item
          label="管控情况:"
          :label-width="formLabelWidth"
          size="large"
        >
          <el-input
            v-model="form.name"
            autocomplete="off"
            style="width: 90%"
            placeholder="请输入"
          />
        </el-form-item>

        <el-form-item label="证实材料:" prop="supportingMaterials" :label-width="formLabelWidth" size="large">
          <el-button style="width: 100px">上传</el-button>
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="addForm = false">取消</el-button>
          <el-button type="primary" @click="addForm = false"> 确定 </el-button>
        </span>
      </template>
    </el-dialog>

    <!-- 表格 -->
    <div class="table-box">
      <el-table :data="tableData" border style="width: 100%">
        <el-table-column prop="id" label="序号" width="100" align="center" />
        <el-table-column prop="name" label="姓名" width="100" align="center" />
        <el-table-column prop="sex" label="性别" align="center" />
        <el-table-column prop="age" label="年龄" align="center" />
        <el-table-column prop="postId" label="身份证号/护照号" align="center" />
        <el-table-column prop="tel" label="联系方式" align="center" />
        <el-table-column prop="address" label="现住住址" align="center" />
        <el-table-column label="操作" width="100" align="center">
          <template #default>
            <el-button link type="primary" size="small" @click="editForm=true"
              >编辑</el-button
            >
            <el-button link type="primary" size="small" @click="closeDel">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <!-- 编辑模态框 -->
    <el-dialog v-model="editForm" title="编辑次密接触者">
      <el-form :model="form" style="padding-top: 30px; width: 100%">
        <el-form-item label="姓名:" :label-width="formLabelWidth" size="large">
          <el-input
            v-model="form.name"
            autocomplete="off"
            style="width: 90%"
            placeholder="请输入"
          />
        </el-form-item>
        <el-form-item label="性别:" prop="sex" :label-width="formLabelWidth" size="large">
          <el-radio-group v-model="form.sex">
            <el-radio label="男" value="男" />
            <el-radio label="女" value="女" />
          </el-radio-group>
        </el-form-item>
        <el-form-item
          label="身份证号/护照号:"
          :label-width="formLabelWidth"
          size="large"
        >
          <el-input
            v-model="form.name"
            autocomplete="off"
            style="width: 90%"
            placeholder="请输入"
          />
        </el-form-item>
        <el-form-item label="年龄:" :label-width="formLabelWidth" size="large">
          <el-input
            v-model="form.name"
            autocomplete="off"
            style="width: 90%"
            placeholder="请输入"
          />
        </el-form-item>
        <el-form-item label="职业:" :label-width="formLabelWidth" size="large">
          <el-input
            v-model="form.name"
            autocomplete="off"
            style="width: 90%"
            placeholder="请输入"
          />
        </el-form-item>
        <el-form-item
          label="联系电话:"
          :label-width="formLabelWidth"
          size="large"
        >
          <el-input
            v-model="form.name"
            autocomplete="off"
            style="width: 90%"
            placeholder="请输入"
          />
        </el-form-item>
        <el-form-item
          label="现住住址(含街道):"
          :label-width="formLabelWidth"
          size="large"
        >
          <el-input
            v-model="form.name"
            autocomplete="off"
            style="width: 90%"
            placeholder="请输入"
          />
        </el-form-item>

        <!-- img -->

        <el-form-item
          label="疫苗接种记录:"
          prop="patientVaccinationList"
          :label-width="formLabelWidth" size="large"
        >
          <el-table
            :data="form.patientVaccinationList"
            style="width: 90%"
            border="true"
          >
            <el-table-column
              prop="inoculationNum"
              label="接种次数"
              width="180"
              align="center"
            />
            <el-table-column
              prop="vaccineBrand"
              label="疫苗品牌"
              width="180"
              align="center"
            />
            <el-table-column
              prop="inoculationTime"
              label="接种时间"
              align="center"
            />
          </el-table>
        </el-form-item>

        <el-form-item label="接触方式:" prop="contactMode" :label-width="formLabelWidth" size="large">
          <el-select
            v-model="form.name"
            placeholder="请选择"
            style="width: 90%"

          >
            <!-- <el-option label="Zone one" value="shanghai" />
              <el-option label="Zone two" value="beijing" /> -->
          </el-select>
        </el-form-item>

        <el-form-item label="末次接触时间:" prop="lastContactTime" :label-width="formLabelWidth" size="large">
          <el-date-picker
            v-model="form.name"
            type="date"
            placeholder="请选择"
            :default-value="new Date()"
            style="width: 90%"
            :disabled-date="disabledDate"
          />
        </el-form-item>

        <el-form-item label="暴露类型:" prop="contactMode" :label-width="formLabelWidth" size="large">
          <el-select
            v-model="form.name"
            placeholder="请选择"
            style="width: 90%"
          >
            <!-- <el-option label="Zone one" value="shanghai" />
              <el-option label="Zone two" value="beijing" /> -->
          </el-select>
        </el-form-item>

        <el-form-item label="管控时间:" prop="lastContactTime" :label-width="formLabelWidth" size="large">
          <el-date-picker
            v-model="form.name"
            type="date"
            placeholder="请选择"
            :default-value="new Date()"
            style="width: 90%"
            :disabled-date="disabledDate"
          />
        </el-form-item>

        <el-form-item
          label="管控情况:"
          :label-width="formLabelWidth"
          size="large"
        >
          <el-input
            v-model="form.name"
            autocomplete="off"
            style="width: 90%"
            placeholder="请输入"
          />
        </el-form-item>

        <el-form-item label="证实材料:" prop="supportingMaterials" :label-width="formLabelWidth" size="large">
          <el-button style="width: 100px">上传</el-button>
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="editForm = false">取消</el-button>
          <el-button type="primary" @click="editForm = false"> 确定 </el-button>
        </span>
      </template>
    </el-dialog>

    <!-- 删除模态框 -->
    <el-dialog
    v-model="delForm"
    title="删除确认"
    width="30%"
    align-center
  >
    <span>删除后将不可恢复，是否继续此操作？</span>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="delForm = false">取消</el-button>
        <el-button type="primary" @click="delForm = false">
          确定
        </el-button>
      </span>
    </template>
  </el-dialog>

    <!-- 分页 -->
    <div class="table-footer">
      <div class="demo-pagination-block">
        <el-pagination
          v-model:current-page="currentPage4"
          v-model:page-size="pageSize4"
          :page-sizes="[15, 20, 25, 30]"
          :small="small"
          :disabled="disabled"
          :background="background"
          layout="total,  prev, pager, next,sizes, jumper"
          :total="50"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </div>

    <!-- 按钮 -->
    <div style="display: flex; width: 90%; height: 100px">
      <el-button style="width: 100px">取消</el-button>
      <el-button type="primary" @click="onSubmit" style="width: 100px"
        >确定</el-button
      >
    </div>
  </div>
</template>

<script lang="ts">
import axios from "@/util/http";
import { defineComponent, onMounted, reactive, ref } from "vue";
import {useRoute} from 'vue-router'

export default defineComponent({
  name: "AddAssociativeTightKnit",
  setup() {
    const addDate = ref(""); //登记日期选择
    const size = ref<"default" | "large" | "small">("large"); //新增---时间
    const route = useRoute();
    const formInline = reactive({
      user: "",
      region: "",
    });

    onMounted(()=>{
      // let id = route.qu
      axios({
        method:'post',
        url:'cryptographer/selectNextCrowded',
        params:{
          currentPage:currentPage4.value,
          pageSize:pageSize4.value,
          // id:
        }
      })
    })

 

    // 新增
    const addForm = ref(false);
    const formLabelWidth = "140px";
    const form = reactive({
      name: "",
      sex: "",
      date1: "",
      date2: "",
      delivery: false,
      type: [],
      resource: "",
      desc: "",
      patientVaccinationList: [],
    });

    //编辑
    const editForm = ref(false)

    // 删除
    let delForm = ref(false)
    const closeDel = ()=>{
      delForm.value = true
    }

    //登记日期禁用函数
    const disabledDate = (time: Date) => {
      return time.getTime() > Date.now();
    };

    const onSubmit = () => {
      console.log("submit!");
    };
    const tableData = [
      {
        id: "2016-05-03",
        name: "Tom",
        sex: "男",
        age: "15",
        postId: "510124",
        tel: "135",
        address: "成都",
        tab: "密接",
      },
      {
        id: "2016-05-03",
        name: "Tom",
        sex: "男",
        age: "15",
        postId: "510124",
        tel: "135",
        address: "成都",
        tab: "密接",
      },
      {
        id: "2016-05-03",
        name: "Tom",
        sex: "男",
        age: "15",
        postId: "510124",
        tel: "135",
        address: "成都",
        tab: "密接",
      },
      {
        id: "2016-05-03",
        name: "Tom",
        sex: "男",
        age: "15",
        postId: "510124",
        tel: "135",
        address: "成都",
        tab: "密接",
      },
      {
        id: "2016-05-03",
        name: "Tom",
        sex: "男",
        age: "15",
        postId: "510124",
        tel: "135",
        address: "成都",
        tab: "密接",
      },
      {
        id: "2016-05-03",
        name: "Tom",
        sex: "男",
        age: "15",
        postId: "510124",
        tel: "135",
        address: "成都",
        tab: "密接",
      },
      {
        id: "2016-05-03",
        name: "Tom",
        sex: "男",
        age: "15",
        postId: "510124",
        tel: "135",
        address: "成都",
        tab: "密接",
      },
      {
        id: "2016-05-03",
        name: "Tom",
        sex: "男",
        age: "15",
        postId: "510124",
        tel: "135",
        address: "成都",
        tab: "密接",
      },
    ];
  
    // 分页
    const currentPage4 = ref(1);
    const pageSize4 = ref(10);
    const small = ref(false);
    const background = ref(true);
    const disabled = ref(false);
    //切换页面数据数量
    const handleSizeChange = (val: number) => {
      console.log(`${val} items per page`);
    };
    //页面跳转输入
    const handleCurrentChange = (val: number) => {
      console.log(`current page: ${val}`);
    };

    return {
      formInline,
      onSubmit,
      tableData,
      currentPage4,
      pageSize4,
      small,
      background,
      disabled,
      handleSizeChange,
      handleCurrentChange,
      editForm,
      addForm,
      formLabelWidth,
      form,
      disabledDate,
      addDate,
      size,
      closeDel,
      delForm
    };
  },
});
</script>

<style scoped lang="less">
.box {
  width: 100%;
  background-color: #fff;
  display: flex;
  justify-content: center;
}
.form-box {
  width: 90%;
  padding-top: 50px;
}
.form-text {
  width: 80px;
}
.btn-box {
  width: 90%;
  display: flex;
}
.table-box {
  width: 90%;
  display: flex;
  padding-top: 40px;
}
.table-footer {
  width: 90%;
  height: 100px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
}
</style>
